<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title=""
      width="80%"
      @close="handleCancel"
    >
      <el-button type="primary" v-print="print">打印</el-button>
      <div id="printBox" v-loading="loading">
        <div class="title">
          <h2 class="title-left">纸张调拨单</h2>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            调纸单位:
            <span class="line">{{ form.unitname }}</span></el-col
          >
          <el-col :span="8">
            调拨日期:
            <span class="line">{{
              form.allotDate?.split("T")[0] ?? ""
            }}</span></el-col
          >
          <el-col :span="8">
            纸张调拨单号:
            <span class="line">{{ form.allotNum }}</span></el-col
          >
        </el-row>
        <table
          border="2"
          cellspacing="0"
          cellpadding="6"
          style="width: 100%; margin-top: 10px"
        >
          <tr>
            <th class="text" style="width: 50px">序号</th>
            <th class="text" style="width: 100px">调纸类型</th>
            <th class="text" style="width: 150px">纸张名称</th>
            <th class="text" style="width: 80px">品牌</th>
            <th class="text" style="width: 80px">定量</th>
            <th class="text" style="width: 100px">规格</th>
            <th class="text" style="width: 100px">纸型</th>
            <th class="text" style="width: 50px">单位</th>
            <th class="text" style="width: 100px">
              <div>令/件</div>
              <div>kg/卷筒</div>
            </th>
            <th class="text" style="width: 100px">
              <div>件数</div>
              <div>卷筒数</div>
            </th>
            <th class="text" style="width: 100px">
              <div>零头</div>
              <div>(令/kg)</div>
            </th>
            <th class="text" style="width: 100px">调纸令数</th>
            <th class="text" style="width: 100px">备注</th>
          </tr>
          <tr v-for="(item, index) in mesAllotDetailList" :key="item.id">
            <td class="text">
              {{ index + 1 }}
            </td>
            <td class="text">
              <dict-tag
                :options="ems_allot_detail_allot_type"
                :value="item.allotType"
              />
            </td>
            <td class="text">
              {{ item.name }}
            </td>
            <td class="text">
              <dict-tag :options="mes_paper_brand" :value="item.brand" />
            </td>
            <td class="text">
              {{ item.weight }}
            </td>
            <td class="text">
              <dict-tag :options="mes_paper_specs" :value="item.specs" />
            </td>
            <td class="text">
              <dict-tag :options="mes_paper_type" :value="item.paperType" />
            </td>
            <td class="text">
              <dict-tag :options="mes_paper_unit" :value="item.unit" />
            </td>
            <td class="text">
              {{ item.lnumber }}
            </td>
            <td class="text">
              {{ item.jnumber }}
            </td>
            <td class="text">
              {{ item.odd }}
            </td>
            <td class="text">
              {{ item.total }}
            </td>
            <td class="text">
              {{ item.detailRemark }}
            </td>
          </tr>
        </table>
        <el-row :gutter="20" style="margin-top: 40px">
          <el-col :span="8">
            经办人: <span class="line">{{ form.createBy }}</span></el-col
          >
          <el-col :span="8"> 客户确认: <span class="line"></span></el-col>
          <el-col :span="8">
            合计: <span class="line"> {{ totalCount }}</span>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { toNumber } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["cancel"]);
import { getAllotInfo } from "@/api/storage/transfer.js";
const {
  mes_paper_type,
  mes_paper_brand,
  mes_paper_specs,
  ems_allot_detail_allot_type,
  mes_paper_unit,
} = proxy.useDict(
  "mes_paper_type",
  "mes_paper_unit",
  "ems_allot_detail_allot_type",
  "mes_paper_brand",
  "mes_paper_specs"
);

const route = useRoute();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
    default: "",
  },
});
//这里是打印的配置项
const print = ref({
  id: "printBox", //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  fitToPage: true,
  // extarCss: `@page { size: auto;  margin: 20mm; } @media print { body { zoom: 0.6; } }`,
  style: `@page { size: auto;  margin: 20mm; zoom: 66%; }`, // 设置缩放比例为100%
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "山东经典印务生产通知单(封面)", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    emit("cancel");
    console.log("开始打印之前！");
  }, // 开始打印之前的callback
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
});
const data = reactive({
  mesAllotDetailList: [],
  form: {},
});
const dataList = ref([]);
const totalCount = ref(0);
const loading = ref(true);
const { form, mesAllotDetailList } = toRefs(data);

watch(
  () => props.id,
  (val) => {
    if (val) {
      loading.value = true;
      getAllotInfo(props.id).then((res) => {
        Object.assign(form.value, { ...res.data });
        mesAllotDetailList.value = res.data.mesAllotDetailList.map((item) => {
          return {
            ...item.mesPaper,
            ...item,
            id: item.paperid,
            allotType: item.allotType?.toString() ?? "",
          };
        });

        totalCount.value = mesAllotDetailList.value.reduce((prev, item) => {
          prev += Number(item.total);
          return prev;
        }, 0);
        let lengthToFill = 7;
        if (mesAllotDetailList.value.length < lengthToFill) {
          const currentLength = mesAllotDetailList.value.length;
          const fillLength = lengthToFill - currentLength;
          const filledArray = new Array(fillLength).fill({});
          mesAllotDetailList.value = [
            ...mesAllotDetailList.value,
            ...filledArray,
          ];
        }
        totalCount.value = toNumber(totalCount.value, 4);
        loading.value = false;
      });
    }
  }
);

const handleCancel = () => {
  dataList.value = [];
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.printBox {
  font-size: 9px !important;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-left {
    text-align: center;
    flex: 1;
  }
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table,
th,
td {
  border: 1px solid #181616;
}

th,
td {
  padding: 8px;
  text-align: center;
}

// th {
//   background-color: #f2f2f2;
// }
@media print {
  table {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 假设您的内容主体在一个类为 `.content` 的元素内 */
  .content {
    /* 防止内容内部断开到下一页 */
    page-break-inside: avoid;

    /* 在每个奇数页末尾强制分页 */
    &:nth-of-type(odd) {
      page-break-after: always;
    }
  }
}
.print-box {
  page-break-before: always;
}

.text {
  font-weight: 400;
}
.line {
  text-align: center;
  display: inline-block;
  width: 150px;
  border-bottom: 1px solid #000000;
}
</style>
